<template>
	<!-- 技能强国 -->
	<view>
		<up-sticky>
			<view class="search-view">
				<up-input
					shape="circle"
					placeholder="请输入关键词"
					prefixIcon="search"
					prefixIconStyle="font-size: 22px;color: #909399"
					customStyle="background: #F2F2F2;padding: 5px 10px;color: rgb(204, 204, 204)"
					border="none"
				></up-input>
			</view>
		</up-sticky>
		<view class="list-info">
			<view class="nav-view">
				<view 
				:class="active==index?'nav-item-active':'nav-item'" 
				v-for="(item, index) in navList" 
				:key="index"
				@tap="changeNav(index)">
					{{item}}
				</view>
			</view>
			<view class="list-view">
				<view class="news-item" v-for="index in 10" :key="index" @tap="getDetail">
					<up-image src="https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E6%8A%80%E8%83%BD%E5%BC%BA%E5%9B%BD/u11.svg" width="176rpx" height="120rpx" mode="aspectFit"></up-image>
					
					<view class="news-info">
						<view class="news-title">孙明—数控车工技能大讲堂</view>
						
						<view class="bottom-info">
							<view class="org">
								<up-icon name="clock" size="13"></up-icon>
								<view>35min</view>
							</view>
							<view class="count">
								<up-icon name="eye" size="13"></up-icon>
								<view>1000</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList: ['通用技术', '行业技术', '先进制造', '管理课堂', '职工创新'],
				active: 0
			}
		},
		methods: {
			changeNav(index) {
				this.active = index
			},
			getDetail() {
				let title = '孙明—数控车工技能大讲堂'
				uni.navigateTo({
				    url: '../../publicity-education/strong-skill-nation/detail?title=' + title
				});
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-view {
		padding: 20rpx;
		background-color: #fff;
	}
	.list-info {
		display: flex;
		.nav-view {
			width: 194rpx;
			height: calc(100vh - 54px);
			background-color: #EDEDED;
			padding: 20rpx 0;
			flex-shrink: 0; flex-grow: 0;
			.nav-item {
				width: 100%;
				height: 77px;
				line-height: 77px;
				text-align: center;
				font-size: 14px;
				color: #999999;
			}
			.nav-item-active {
				width: 100%;
				height: 77px;
				line-height: 77px;
				text-align: center;
				border-right: 2px solid rgba(255, 78, 78, 1);
				font-weight: bold;
				color: rgb(255, 78, 78);
				background-color: rgba(255, 78, 78, 0.101960784313725);
			}
		}
		.list-view {
			flex: 1;width: 0;
			padding: 0 20rpx;
			.news-item {
				display: flex;
				align-items: center;
				border-bottom: 1px solid #eee;
				padding: 20rpx 0;
				.news-info {
					height: 120rpx;
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding-left: 10rpx;
					
					.news-title {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 26rpx;
					}
					
					.bottom-info {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 26rpx;
						color: $uni-text-color-grey;
						
						.org, .count {
							display: flex;
							align-items: center;
						}
						
						:deep(.u-iconfont) {
							color: $uni-text-color-grey !important;
						}
					}
				} 
			}
		}
	}
</style>